<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Form 表单3</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style type="text/css">
.item-inline{
	display: inline-block;
	width: calc(50% - 12px);
	margin-bottom: 0;
}
.item-data-picker{
	width: 220px;
}
</style>
<body>

<div id="app">
	<a-affix :offset-top="10"><div id="form_links"></div></a-affix><script src="links.js"></script><script>form_link();</script>
	
	<a-divider class="a-divi" orientation="left">校验其他组件</a-divider><!-- =============================================================== -->
	<p class="desc">以上演示没有出现的表单控件对应的校验演示。</p>
	<a-form :model="formState20" name="validate_other" v-bind="formItemLayout20"
		@finish="onFinish20" @finish-Failed="onFinishFailed20" style="width: 800px;">
		<a-form-item label="Plain Text">
			<span class="ant-form-text">China</span>
		</a-form-item>
		<a-form-item name="select" label="Select" has-feedback :rules="[{ required: true, message: 'Please select your country!' }]">
			<a-select v-model:value="formState20.select" placeholder="Please select a country">
				<a-select-option value="china">China</a-select-option>
				<a-select-option value="usa">U.S.A</a-select-option>
			</a-select>
		</a-form-item>
	
		<a-form-item name="select-multiple" label="Select[multiple]" :rules="[{ required: true, message: 'Please select your favourite colors!', type: 'array' }]">
			<a-select v-model:value="formState20['select-multiple']" mode="multiple" placeholder="Please select favourite colors">
				<a-select-option value="red">Red</a-select-option>
				<a-select-option value="green">Green</a-select-option>
				<a-select-option value="blue">Blue</a-select-option>
			</a-select>
		</a-form-item>
	
		<a-form-item label="InputNumber">
			<a-form-item name="input-number" no-style>
				<a-input-number v-model:value="formState20['input-number']" :min="1" :max="10"></a-input-number>
			</a-form-item>
			<span class="ant-form-text">machines</span>
		</a-form-item>
	
		<a-form-item name="switch" label="Switch">
			<a-switch v-model:checked="formState20.switch"></a-switch>
		</a-form-item>
	
		<a-form-item name="slider" label="Slider">
			<a-slider v-model:value="formState20.slider" :marks="{0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F',}"></a-slider>
		</a-form-item>
	
		<a-form-item name="radio-group" label="Radio.Group">
			<a-radio-group v-model:value="formState20['radio-group']">
				<a-radio value="a">item 1</a-radio>
				<a-radio value="b">item 2</a-radio>
				<a-radio value="c">item 3</a-radio>
			</a-radio-group>
		</a-form-item>
	
		<a-form-item name="radio-button" label="Radio.Button" :rules="[{ required: true, message: 'Please pick an item!' }]">
			<a-radio-group v-model:value="formState20['radio-button']">
				<a-radio-button value="a">item 1</a-radio-button>
				<a-radio-button value="b">item 2</a-radio-button>
				<a-radio-button value="c">item 3</a-radio-button>
			</a-radio-group>
		</a-form-item>
	
		<a-form-item name="checkbox-group" label="Checkbox.Group">
			<a-checkbox-group v-model:value="formState20['checkbox-group']">
				<a-row>
					<a-col :span="8"><a-checkbox value="A" style="line-height: 32px">A</a-checkbox></a-col>
					<a-col :span="8"><a-checkbox value="B" style="line-height: 32px" disabled>B</a-checkbox></a-col>
					<a-col :span="8"><a-checkbox value="C" style="line-height: 32px">C</a-checkbox></a-col>
					<a-col :span="8"><a-checkbox value="D" style="line-height: 32px">D</a-checkbox></a-col>
					<a-col :span="8"><a-checkbox value="E" style="line-height: 32px">E</a-checkbox></a-col>
					<a-col :span="8"><a-checkbox value="F" style="line-height: 32px">F</a-checkbox></a-col>
				</a-row>
			</a-checkbox-group>
		</a-form-item>
	
		<a-form-item name="rate" label="Rate">
			<a-rate v-model:value="formState20.rate" allow-half></a-rate>
		</a-form-item>
	
		<a-form-item name="upload" label="Upload" extra="longgggggggggggggggggggggggggggggggggg">
			<a-upload v-model:fileList="formState20.upload" name="logo" action="/upload.do" list-type="picture">
				<a-button>
					<template #icon>
						<Upload-Outlined class="ant-icon"></Upload-Outlined>
					</template>
					Click to upload
				</a-button>
			</a-upload>
		</a-form-item>
	
		<a-form-item label="Dragger">
			<a-form-item name="dragger" no-style>
				<a-upload-dragger v-model:fileList="formState20.dragger" name="files" action="/upload.do">
					<p class="ant-upload-drag-icon">
						<Inbox-Outlined class="ant-icon"></Inbox-Outlined>
					</p>
					<p class="ant-upload-text">Click or drag file to this area to upload</p>
					<p class="ant-upload-hint">Support for a single or bulk upload.</p>
				</a-upload-dragger>
			</a-form-item>
		</a-form-item>
	
		<a-form-item :wrapper-col="{ span: 12, offset: 6 }">
			<a-button type="primary" html-type="submit">Submit</a-button>
		</a-form-item>
	</a-form>
	
	<a-divider class="a-divi" orientation="left">自定义校验</a-divider><!-- =============================================================== -->
	<p class="desc">我们提供了 validateStatus help hasFeedback 等属性，你可以不通过 Form 自己定义校验的时机和内容。</p>
	<p class="desc">validateStatus: 校验状态，可选 'success', 'warning', 'error', 'validating'。</p>
	<p class="desc">hasFeedback：用于给输入框添加反馈图标。</p>
	<p class="desc">help：设置校验文案。</p>
	<a-form v-bind="formItemLayout21" style="width: 800px;">
		<a-form-item label="Fail" validate-status="error" help="Should be combination of numbers & alphabets">
			<a-input id="error" placeholder="unavailable choice"></a-input>
		</a-form-item>
	
		<a-form-item label="Warning" validate-status="warning">
			<a-input id="warning" placeholder="Warning">
				<template #prefix>
					<smile-outlined class="ant-icon"></smile-outlined>
				</template>
			</a-input>
		</a-form-item>
	
		<a-form-item label="Validating" has-feedback validate-status="validating" help="The information is being validated...">
			<a-input id="validating" placeholder="I'm the content is being validated"></a-input>
		</a-form-item>
	
		<a-form-item label="Success" has-feedback validate-status="success">
			<a-input id="success" placeholder="I'm the content"></a-input>
		</a-form-item>
	
		<a-form-item label="Warning" has-feedback validate-status="warning">
			<a-input id="warning2" placeholder="Warning"></a-input>
		</a-form-item>
	
		<a-form-item label="Fail" has-feedback validate-status="error" help="Should be combination of numbers & alphabets">
			<a-input id="error2" placeholder="unavailable choice"></a-input>
		</a-form-item>
	
		<a-form-item label="Success" has-feedback validate-status="success">
			<a-date-picker style="width: 100%"></a-date-picker>
		</a-form-item>
	
		<a-form-item label="Warning" has-feedback validate-status="warning">
			<a-time-picker style="width: 100%"></a-time-picker>
		</a-form-item>
	
		<a-form-item label="Error" has-feedback validate-status="error">
			<a-range-picker style="width: 100%"></a-range-picker>
		</a-form-item>
	
		<a-form-item label="Error" has-feedback validate-status="error">
			<a-select placeholder="I'm Select" allow-clear>
				<a-select-option value="1">Option 1</a-select-option>
				<a-select-option value="2">Option 2</a-select-option>
				<a-select-option value="3">Option 3</a-select-option>
			</a-select>
		</a-form-item>
	
		<a-form-item label="Validating" has-feedback validate-status="error" help="Something breaks the rule.">
			<a-cascader placeholder="I'm Cascader" :options="[{ value: 'xx', label: 'xx' }]" allow-clear></a-cascader>
		</a-form-item>
	
		<a-form-item label="Warning" has-feedback validate-status="warning" help="Need to be checked">
			<a-tree-select placeholder="I'm TreeSelect" :tree-data="[{ value: 'xx', label: 'xx' }]" allow-clear></a-tree-select>
		</a-form-item>
	
		<a-form-item label="inline" style="margin-bottom: 0px;">
			<a-form-item validate-status="error" help="Please select left date" class="item-inline">
				<a-date-picker class="item-data-picker"></a-date-picker>
			</a-form-item>
			<span style="display: inline-block; width: 24px; line-height:32px; text-align: center">
				-
			</span>
			<a-form-item help="Please select right date" class="item-inline">
				<a-date-picker class="item-data-picker"></a-date-picker>
			</a-form-item>
		</a-form-item>
	
		<a-form-item label="Success" has-feedback validate-status="success">
			<a-input-Number style="width: 100%"></a-input-Number>
		</a-form-item>
	
		<a-form-item label="Success" has-feedback validate-status="success">
			<a-input allow-clear placeholder="with allowClear"></a-input>
		</a-form-item>
	
		<a-form-item label="Warning" has-feedback validate-status="warning">
			<a-input-password placeholder="with input password"></a-input-password>
		</a-form-item>
	
		<a-form-item label="Error" has-feedback validate-status="error">
			<a-input-password allow-clear placeholder="with input password and allowClear"></a-input-password>
		</a-form-item>
	
		<a-form-item label="Fail" validate-status="error" has-feedback>
			<a-mentions></a-mentions>
		</a-form-item>
	
		<a-form-item label="Fail" validate-status="error" has-feedback help="Should have something">
			<a-textarea allow-clear show-count></a-textarea>
		</a-form-item>
	</a-form>
	
	<a-divider class="a-divi" orientation="left">useForm 基本表单</a-divider><!-- =============================================================== -->
	<p class="desc">通过 Form.useForm 更加灵活的使用表单组件。</p>
	<a-form :label-col="labelCol22" :wrapper-col="wrapperCol22" style="width: 800px;">
		<a-form-item label="Activity name" v-bind="validateInfos22.name">
			<a-input v-model:value="modelRef22.name"></a-input>
		</a-form-item>
		<a-form-item label="Activity zone" v-bind="validateInfos22.region">
			<a-select v-model:value="modelRef22.region" placeholder="please select your zone">
				<a-select-option value="shanghai">Zone one</a-select-option>
				<a-select-option value="beijing">Zone two</a-select-option>
			</a-select>
		</a-form-item>
		<a-form-item label="Activity type" v-bind="validateInfos22.type">
			<a-checkbox-group v-model:value="modelRef22.type">
				<a-checkbox value="1" name="type">Online</a-checkbox>
				<a-checkbox value="2" name="type">Promotion</a-checkbox>
				<a-checkbox value="3" name="type">Offline</a-checkbox>
			</a-checkbox-group>
		</a-form-item>
		<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
			<a-button type="primary" @click.prevent="onSubmit22">Create</a-button>
			<a-button style="margin-left: 10px" @click="resetFields22">Reset</a-button>
		</a-form-item>
	</a-form>
	
	<a-divider class="a-divi" orientation="left">useForm 嵌套表单</a-divider><!-- =============================================================== -->
	<p class="desc">通过 Form.useForm 使用点字符串拼接进行嵌套数据校验。</p>
	<a-form :label-col="labelCol23" :wrapper-col="wrapperCol23" style="width: 800px;">
		<a-form-item label="Activity name" v-bind="validateInfos23.name">
			<a-input v-model:value="modelRef23.name" />
		</a-form-item>
		<a-form-item label="Sub name" v-bind="validateInfos23['sub.name']">
			<a-input v-model:value="modelRef23.sub.name" />
		</a-form-item>
		<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
			<a-button type="primary" @click.prevent="onSubmit23">Create</a-button>
			<a-button style="margin-left: 10px" @click="reset23">Reset</a-button>
		</a-form-item>
	</a-form>
	
	<a-divider class="a-divi" orientation="left">useForm 自定义触发时机</a-divider><!-- =============================================================== -->
	<p class="desc">通过 Form.useForm 自定义触发校验时机</p>
	<a-form :label-col="labelCol24" :wrapper-col="wrapperCol24" style="width: 800px;">
		<a-form-item label="Activity name" v-bind="validateInfos24.name">
			<a-input v-model:value="modelRef24.name" @blur="validate24('name', { trigger: 'blur' }).catch(() => {})" />
		</a-form-item>
		<a-form-item label="Activity zone" v-bind="validateInfos24.region">
			<a-select v-model:value="modelRef24.region" placeholder="please select your zone">
				<a-select-option value="shanghai">Zone one</a-select-option>
				<a-select-option value="beijing">Zone two</a-select-option>
			</a-select>
		</a-form-item>
		<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
			<a-button type="primary" @click.prevent="onSubmit24">Create</a-button>
			<a-button style="margin-left: 10px" @click="resetFields24">Reset</a-button>
		</a-form-item>
	</a-form>
	
	<a-divider class="a-divi" orientation="left">useForm 合并错误信息</a-divider><!-- =============================================================== -->
	<p class="desc">通过 Form.useForm 合并展示表单校验信息。</p>
	<a-form :label-col="labelCol25" :wrapper-col="wrapperCol25" style="width: 800px;">
		<a-form-item label="Activity name" required>
			<a-input v-model:value="modelRef25.name" />
		</a-form-item>
		<a-form-item label="Activity zone" required>
			<a-select v-model:value="modelRef25.region" placeholder="please select your zone">
				<a-select-option value="shanghai">Zone one</a-select-option>
				<a-select-option value="beijing">Zone two</a-select-option>
			</a-select>
		</a-form-item>
		<a-form-item label="Activity type" required>
			<a-checkbox-group v-model:value="modelRef25.type">
				<a-checkbox value="1" name="type">Online</a-checkbox>
				<a-checkbox value="2" name="type">Promotion</a-checkbox>
				<a-checkbox value="3" name="type">Offline</a-checkbox>
			</a-checkbox-group>
		</a-form-item>
		<a-form-item class="error-infos" :wrapper-col="{ span: 14, offset: 4 }" v-bind="errorInfos25">
			<a-button type="primary" @click.prevent="onSubmit25">Create</a-button>
			<a-button style="margin-left: 10px" @click="resetFields25">Reset</a-button>
		</a-form-item>
	</a-form>
	
	
</div>
<div class="h100"></div>

</body>
<script>
// console.log(antd.Form.useForm);
const modelRef22 = {name: '', region: undefined, type: [],};
const rulesRef22 = {
	name: [
		{required: true, message: 'Please input name',},
	],
	region: [
		{required: true, message: 'Please select region',},
	],
	type: [
		{required: true, message: 'Please select type', type: 'array',},
	],
};
const retForm22 = antd.Form.useForm(modelRef22, rulesRef22, {
	// onValidate: (...args) => console.log(...args),
	onValidate: function(field, isPass, msg){
		console.log('onValidate22: ', field, isPass, msg);
	},
});
// console.log(retForm22);

const modelRef23 = {name: '', sub: {name: '',},};
const rulesRef23 = {
	name: [
		{required: true, message: 'Please input name',},
	],
	'sub.name': [
		{required: true, message: 'Please input sub name',},
	],
};
const retForm23 = antd.Form.useForm(modelRef23, rulesRef23, {
	onValidate: function(field, isPass, msg){
		console.log('onValidate23: ', field, isPass, msg);
	},
});

const modelRef24 = {name: '', region: undefined,};
const rulesRef24 = {
	name: [
		{required: true, message: 'Please input Activity name',},
		{min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur',},
	],
	region: [
		{required: true, message: 'Please select region',},
	],
};
const retForm24 = antd.Form.useForm(modelRef24, rulesRef24, {
	onValidate: function(field, isPass, msg){
		console.log('onValidate24: ', field, isPass, msg);
	},
});

const modelRef25 = {name: '', region: undefined, type: [],};
const rulesRef25 = {
	name: [
		{required: true, message: 'Please input name',},
	],
	region: [
		{required: true, message: 'Please select region',},
	],
	type: [
		{required: true, message: 'Please select type', type: 'array',},
	],
};
const retForm25 = antd.Form.useForm(modelRef25, rulesRef25, {
	onValidate: function(field, isPass, msg){
		console.log('onValidate25: ', field, isPass, msg);
	},
});


const Main = {
data() {
	return {
		fileIndex: 3,
		
		formItemLayout20: {labelCol: { span: 6 }, wrapperCol: { span: 14 },},
		formState20: {'input-number': 3, 'checkbox-group': ['A', 'B'], rate: 3.5,},
		
		formItemLayout21: {
			labelCol: {xs: { span: 24 }, sm: { span: 6 },},
			wrapperCol: {xs: { span: 24 }, sm: { span: 14 },},
		},
		
		labelCol22: { span: 4 },
		wrapperCol22: { span: 14 },
		modelRef22,
		resetFields22: retForm22.resetFields,
		validateInfos22: retForm22.validateInfos,
		
		labelCol23: { span: 4 },
		wrapperCol23: { span: 14 },
		modelRef23,
		validateInfos23: retForm23.validateInfos,
		
		labelCol24: { span: 4 },
		wrapperCol24: { span: 14 },
		modelRef24,
		validateInfos24: retForm24.validateInfos,
		validate24: retForm24.validate,
		
		labelCol25: { span: 4 },
		wrapperCol25: { span: 14 },
		modelRef25,
		resetFields25: retForm25.resetFields,
		
		
	}
},
computed: {
	btn(){
		return function(i){
			return this.fileIndex == i ? "layui-btn" : "layui-btn0";
		}
	},
	errorInfos25(){
		return retForm25.mergeValidateInfo(Object.values(retForm25.validateInfos));
	},
},
methods:{
	onFinish20(values){
		console.log('onFinish20 Success:', values);
	},
	onFinishFailed20(errorInfo){
		console.log('onFinishFailed20:', errorInfo);
	},
	
	onSubmit22(){
		retForm22.validate().then(() => {
			console.log('onSubmit22: 验证通过：', Vue.toRaw(this.modelRef22));
		}).catch(err => {
			console.log('error', err);
		});
	},
	
	onSubmit23(){
		retForm23.validate().then((res) => {
			console.log('onSubmit23: 验证通过：',res , Vue.toRaw(this.modelRef23));
		}).catch(err => {
			console.log('error', err);
		});
	},
	reset23(){
		retForm23.resetFields();
	},
	
	onSubmit24(){
		retForm24.validate().then((res) => {
			console.log('onSubmit24: 验证通过：',res , Vue.toRaw(this.modelRef24));
		}).catch(err => {
			console.log('error', err);
		});
	},
	resetFields24(){
		retForm24.resetFields();
	},
	
	onSubmit25(){
		retForm25.validate().then((res) => {
			console.log('onSubmit25: 验证通过：',res , Vue.toRaw(this.modelRef25));
		}).catch(err => {
			console.log('error', err);
		});
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
